<template>
    <div id="LoginLogs">
        <!-- 面包导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/admin' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>日志管理</el-breadcrumb-item>
            <el-breadcrumb-item>登入日志</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 右侧卡片区域 -->
        <!-- 用户列表卡片区 -->
        <el-card class="box-card">
            <el-form size="small" :inline="true" :model="queryMap" class="demo-form-inline" label-suffix=":">
                <el-form-item label="IP地址">
                    <el-input @keyup.enter.native="search" clearable @clear="search" v-model="queryMap.ip"
                              placeholder="请输入IP查询"></el-input>
                </el-form-item>
                <el-form-item label="登入地址">
                    <el-input @keyup.enter.native="search" clearable @clear="search" v-model="queryMap.location"
                              placeholder="请输入登入地址查询"></el-input>
                </el-form-item>
                <el-form-item label="时间" class="tl-margin-bottom-0">
                    <el-date-picker unlink-panels @change="search" v-model="dateRange" type="datetimerange"
                                    :picker-options="pickerOptions"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button icon="el-icon-search" @click="search" type="primary">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button @click="deleteFileOrDirectory(select)" icon="el-icon-delete"
                               :disabled="this.select.length === 0">批量
                    </el-button>
                </el-form-item>
            </el-form>
            <!-- 表格区域 -->
            <template>
                <el-table border stripe :data="LoginLogData" max-height="450" @selection-change="selectChange">
                    <el-table-column type="selection" width="55" align="center"></el-table-column>
                    <el-table-column prop="id" type="index" label="#" width="50"></el-table-column>
                    <el-table-column prop="ip" label="IP地址"></el-table-column>
                    <el-table-column prop="location" label="登入地点" width="250"></el-table-column>
                    <el-table-column show-overflow-tooltip prop="userSystem" label="操作系统" width="150"></el-table-column>
                    <el-table-column prop="userBrowser" label="浏览器"></el-table-column>
                    <el-table-column prop="loginTime" label="登入时间" width="190">
                        <template slot-scope="scope">
                            {{ scope.row.loginTime | dateFormat("yyyy-MM-dd hh:mm:ss") }}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="操作" width="100px;">
                        <template slot-scope="scope">
                            <el-button type="text" size="mini" icon="el-icon-delete" @click="del(scope.row.id)">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
            <!-- 分页 -->
            <el-pagination
                class="tl-margin-top-20 tl-text-center" background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="this.queryMap.pageNum"
                :page-sizes="[10, 15, 20]"
                :page-size="this.queryMap.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            ></el-pagination>
        </el-card>
    </div>
</template>

<script>
import { dateFormat } from '@/assets/js/filter';

export default {
    name: 'LoginLogs',
    components: {},
    data: function () {
        return {
            select: [], // 选中的值显示
            LoginLogData: [],
            total: 0, // 总共多少条数据
            dateRange: [],
            queryMap: {
                pageNum: 1,
                pageSize: 10,
                ip: '',
                location: '',
                startTime: null,
                endTime: null
            }, // 查询对象
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick (picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick (picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick (picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            }
        }
    },
    methods: {
        async deleteFileOrDirectory () {
            const ids = this.select.map(item => item.id).join(); // 获取所有选中行的id组成的字符串，以逗号分隔
            await this.$confirm('此操作将永久批量删除登入日志, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                const { data: res } = await this.$http.delete(`/log/login/batch/${ids}`);
                if (res.code ^ 200) {
                    return this.$message({ showClose: true, message: res.msg, type: 'error' });
                }
                this.$message({ showClose: true, message: res.msg, type: 'success' });
                await this.getLoginLogList();
            }).catch(() => {
                this.$message({ showClose: true, type: 'info', message: '已取消删除' });
            });
        },
        selectChange (select) {
            this.select = select;
        },
        // 搜索
        search () {
            this.queryMap.pageNum = 1;
            this.getLoginLogList();
        },
        // 加载登入日志列表
        async getLoginLogList () {
            if (this.dateRange && this.dateRange.length) {
                this.queryMap.startTime = dateFormat(this.dateRange[0], 'yyyy-MM-dd hh:mm:ss')
                this.queryMap.endTime = dateFormat(this.dateRange[1], 'yyyy-MM-dd hh:mm:ss')
            } else {
                this.queryMap.startTime = null
                this.queryMap.endTime = null
            }
            const { data: res } = await this.$http.get('/logs/login', {
                params: this.queryMap
            });
            if (res.code ^ 200) {
                return this.$message({ showClose: true, message: res.msg, type: 'error' });
            }
            if (!res.data.rows.length && (this.queryMap.pageNum ^ 1)) {
                this.queryMap.pageNum--;
                return await this.getLoginLogList();
            }
            this.total = res.data.total;
            this.LoginLogData = res.data.rows;
        },
        // 删除登入日志
        async del (id) {
            await this.$confirm('此操作将永久删除该登入日志, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                const { data: res } = await this.$http.delete(`/log/login/delete/${id}`);
                if (res.code ^ 200) {
                    return this.$message({ showClose: true, message: res.msg, type: 'error' });
                }
                this.$message({ showClose: true, message: res.msg, type: 'success' });
                await this.getLoginLogList();
            }).catch(() => {
                this.$message({ showClose: true, type: 'info', message: '已取消删除' });
            });
        },
        // 改变页码
        handleSizeChange (newSize) {
            this.queryMap.pageSize = newSize;
            this.getLoginLogList();
        },
        // 翻页
        handleCurrentChange (current) {
            this.queryMap.pageNum = current;
            this.getLoginLogList();
        }
    },
    created: function () {
        this.getLoginLogList();
    }
}
</script>

<style lang='less' scoped>

</style>
